<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport"
        content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,initial-scale=1.0,width=device-width"/>
  <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
  <title>付款</title>
  <link rel="stylesheet" type="text/css" href="__CSS__/shareh/api.css"/>
  <link rel="stylesheet" type="text/css" href="__CSS__/shareh/aui.css"/>
  <style>
      * {
          margin: 0;
          padding: 0;
          box-sizing: border-box;
          -moz-box-sizing: border-box;
          -webkit-box-sizing: border-box;
          outline: none;
          list-style: none;
      }
      html, body {
          width: 100%;
          height: 100%;
          background-color: #F6F6F6;
      }

      img {
          max-width: 100%;
          vertical-align: middle;
      }

      .top_tip {
          height: 1.55rem;
          background-color: #fff;
          padding: 0.2rem 0.375rem;
          margin-bottom: 0.25rem;
          display: flex;
          align-items: center;
          font-size: 0.8rem;
      }

      .top_tip img {
          width: 0.75rem;
          height: 0.75rem;
      }

      .top_tip marquee {
          flex: 1;
          color: #F96B47
      }

      .top_buy {
          background-color: #fff;
          text-align: center;
          /*padding: 0.4375rem;*/
          /*padding-bottom: 1rem;*/
      }

      .top_buy h2 {
          font-size: 0.375rem;
          font-family: Source Han Sans CN;
          font-weight: bold;
          color: rgba(51, 51, 51, 1);
          /*margin-bottom: 0.35rem;*/
      }

      .top_buy .main_box {
          display: flex;
          line-height: 0.85rem;
          justify-content: space-around;
          align-items: center;
          margin-bottom: 0.5rem;

      }

      .top_buy .main_box .mid_box {
          border: 0.025rem solid rgba(220, 220, 220, 1);
          /*padding: 0rem 0.375rem;*/
          /*line-height: 0.75rem;*/
          border-radius: 0.125rem;
          height: 1.4rem;
          width: 11.025rem;
          display: flex;
          align-items: center;
      }

      .top_buy .main_box .mid_box img {
          width: 0.8rem;
          height: 0.8rem;
      }

      .top_buy .buy_btn {
          width: 4.45rem;
          height: 1.375rem;
          background: rgba(249, 107, 71, 1);
          border-radius: 0.3rem;
          color: #fff;
          line-height: 1.5rem;
          font-size: 0.8rem;
          text-align: center;
          margin: 0.35rem auto;
      }

      .top_buy .add_bz {
          text-align: center;
          font-size: 0.8rem;
          font-family: Source Han Sans CN;
          font-weight: 400;
          color: rgba(249, 107, 71, 1);
      }

      .note_bz {
          font-size: 0.8rem;
          font-family: Source Han Sans CN;
          font-weight: 400;
          color: #999999;

      }

      .top_buy .add_bz2 {
          font-size: 0.8rem;
          font-family: Source Han Sans CN;
          font-weight: 400;
          color: rgba(249, 107, 71, 1);

      }

      .banner_box {
          margin-top: 0;
          width: 100%;
      }

      .banner_box img {
          width: 100%;
          max-width: 100%;
      }

      .caidan {
          margin-top: 0;
          background-color: #fff;
          padding: 0.45rem;
          margin-bottom: 0.3125rem;
      }

      .caidan li + li {
          margin-top: 0.325rem;
      }


      .list_l {
          /*width:0.625rem;//*/
          display: block;
          word-break: keep-all;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          font-size: 0.8rem;
		  text-align:left;
      }

      .jifen {
          font-size: 0.8rem !important;
      }

      .tip_bottom {
          min-height: 4rem;
          display: flex;
          align-items: flex-end;
          justify-content: center;
          color: #454647;
          font-size: 0.7rem;
          padding-bottom: 1rem;
      }

      .tip_bottom1 {
          color: #454647;
          font-size: 0.7rem;
          text-align: center;
      }

      .btn-hs {
          width: 2.25rem;
          height: 1.4rem;
          border: 0.025rem solid rgba(249, 107, 71, 1);
          border-radius: 0.1rem;
          color: #F96B47;
          font-size: 0.65rem;
          display: flex;
          align-items: center;
          justify-content: center;
      }

      .mid_box1 {
          width: 11.025rem;
          display: flex;
          align-items: center;
      }

      .hs-area {
          flex: 1;
          display: flex;
          align-items: center;
          border: 0.025rem solid #DCDCDC;
          height: 1.4rem;
          padding-left: 0.43rem;
      }

      .input-hs {
          width: 100%;
          height: 100%;
          font-size: 12px;
      }

      .input-hs::-webkit-input-placeholder {
          color: #CFC7C4;
          font-size: 12px;
      }

      .q {
          width: 0.8rem;
          height: 0.6rem;
          margin-right: 0.35rem;
      }

      .yuan {
          color: #333333;
          font-size: 0.7rem;
          padding: 0 0.43rem;
      }
    .hidden{
      display: none;
    }
      .ovfHiden{overflow: hidden;height: 100%;}
  </style>
</head>
<body>
<div id="app">
  <div class="top_tip">
    <img src="__IMG__/shareh/zhifu/gg.png" alt="">
    <marquee direction="left" scrollamount="4"><span style="color: #f85959">{$shopData[0]['conf_rate']}</span></marquee>
  </div>
  <div class="top_buy">
    <h2 class="jifen" style='margin:10px;padding-top:10px;'>{$shopName}</h2>
	
	<div class="top_buy" style='margin-bottom:0;'>
    <div class="main_box">
      <div class="jifen">现金买单</div>
      <div class="mid_box">
        <img src="__IMG__/shareh/zhifu/rmb.png" style="width: 10%;margin-right: 0.1rem" alt="">
        <input type="tel" inputmode="decimal" id="getJiFen" value="" style="width: 50%;border: none;">
      </div>
      <div class="jifen">元</div>
    </div>
      <p style="clear: both;margin-top: -7px;color: rgba(249, 107, 71, 1);">支付金额有机会随机立减</p>
    <div class="main_box" style="">
      <div class="jifen" style="opacity: 0">现金买单</div>
      <div class="mid_box" id="sendJifen" style="color: #F96B47 ; font-size: 0.8rem;border: none">

      </div>
      <div class="jifen" style="opacity: 0">元</div>
    </div>
    <div class="buy_btn" onclick="payMoneyJifen(1)">确认支付</div>
    <!--<p class="add_bz moneyAdd" onclick="addnote('money')">添加付款备注</p>-->
    <div style="width:100%;display: flex;align-items: center;justify-content: center;">
       <p class="note_bz moneyRemark"></p>
       <p class="add_bz2 hidden moneyEdit" onclick="addnote('money')">修改</p>
    </div>
	<div class="caidan">
    <ul>
      <li class="list">
        {volist name='shopMsg' id='sm'}
        <div class="list_l">{++$key}.现金买单达{$sm.rule_cash}元，赠送{$sm.rule_jifen}积分。</div>
        {/volist}
      </li>
    </ul>
  </div>
    
  </div>
  
<div class="banner_box">
    <img src="{$shopData[1]['conf_img']}" alt="">
  </div>
  <div class="jifen" style='margin-top:5px;'>我的积分：{$user['user_integral']}</div>
    <div class="main_box" style='margin-top:10px;'>
      
      <div class="jifen">积分买单</div>
      <div class="mid_box">
        <img src="__IMG__/shareh/zhifu/money.png" alt="">
        <input type="tel" inputmode="numeric" style="border: none;" id="jifenJifen" oninput="value=value.replace(/[^\d]/g,'')" />
      </div>
      <div class="jifen">积分</div>
    </div>
    <div class="main_box" style="margin-bottom: 0.75rem">
      <div class="jifen" style="opacity: 0">积分买单</div>
      <div class="mid_box1">
        <div class="hs-area">
          <img src="__IMG__/shareh/task2/q.png" alt="" class="q">
          <div class="flex-1">
            <input type="tel" inputmode="decimal" class="input-hs" placeholder="请输入抵现金额" id="jifenMoney" maxlength="7">
          </div>
        </div>
        <div class="yuan">元</div>
        <div class="btn-hs" onclick="hs();">换算</div>
      </div>
      <div class="jifen" style="opacity: 0">积分</div>
    </div>

    <div class="buy_btn" onclick="payMoneyJifen(2)">确认支付</div>
    <!--<p class="add_bz jifenAdd" onclick="addnote('jifen')">添加付款备注</p>-->
    <div style="width:100%;display: flex;align-items: center;justify-content: center;">
       <p class="note_bz jifenRemark"></p>
       <p class="add_bz2 jifenEdit hidden" onclick="addnote('jifen')">修改</p>
    </div>
  </div>
  <input type="hidden" id="payPass" value="{$user['user_pay_password']}" />
  <input type="hidden" id="user_integral" value="{$user['user_integral']}" />
  <div class="tip_bottom" style="color: cornflowerblue;" onclick="location.href='https://i.eqxiu.com/s/bBySBkHe?bt=yxy&eqrcode=1&share_level=1&from_user=20200117f955df2620200117f955df26&from_id=84bb3a2e-5754a38d3-d&share_time=1606494424076';">全天数据管理有限公司</div>
</div>
</body>
<!--备注-->
<style>
  .main {
    margin-left: 1.8rem;
    margin-right: 2rem;
    background: white;
    border-radius: 0.35rem;
    font-weight: 500;
    margin-top: 150px;

  }

  .top .note {
    height: 2rem;
    line-height: 2rem;
    text-align: center;
    margin: 1rem auto;
    color: #454647;
    font-size: 0.8rem;
    font-family: Source Han Sans CN;
    font-weight: bold;
    margin-top: 1rem;
    margin-bottom: 2.5rem;
  }

  .top img {
    display: inline-block;
    width: 15px;
    height: 15px;
    margin-left: 0.975rem;
  }

  .type {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-left: 1rem;
    padding-right: 0.8rem;
    height: 1.6rem;
  }

  input[type="number"] {
    flex: 1;
    height: 1.05rem;
    border: 1px solid rgba(153, 153, 153, 1);
    border-radius: 0.1rem;
  }

  .btn1 {
    padding-top: 0.5rem;
    margin-left: 0.95rem;
    margin-right: 0.775rem;
    padding-bottom: 0.575rem;
    /*height: 1.3rem;*/
    text-align: center;
    line-height: 1.3rem;
    color: #333333;
    font-size: 0.75rem;
    width: 40%;
    float: left;
    border-right: 0.025rem solid #DCDCDC;
    height: 2rem
  }

  .btn2 {
    padding-top: 0.5rem;
    margin-left: 0.95rem;
    margin-right: 0.775rem;
    padding-bottom: 0.575rem;
    /*height: 1.3rem;*/
    text-align: center;
    line-height: 1.3rem;
    color: #F96B47;
    font-size: 0.75rem;
    width: 30%;
    float: left;
    height: 2rem;

  }

  .input_ps {
    width: 12.45rem;
    height: 1.9rem;
    border: 0.0125rem solid #D2D2D2;
    border-radius: 0.1rem;
    margin-bottom: 3.3rem;
    margin-right: 0.6rem;
    margin-left: 0.6rem;

  }

  input::-webkit-input-placeholder {
    font-size: 16px;
  }
</style>
<div class="all_div" style="display:none;width: 100%;height: 100%;background-color: gray;position: absolute;z-index: 9999;background: rgba(0,0,0,0.5);top: 0;left: 0;padding: 0;margin: 0;text-align: center;">
  <div class="main hidden moneyDiv">
    <div class="top underLine">
      <span class="note">添加备注</span>
    </div>
    <div class="type">
      <div class="input_ps">
        <input type="text" placeholder="  收款方可见，最多10个字" id="note"  maxlength="10" style="border: 1px solid #ccc">
      </div>
    </div>
    <div style="width:100%;overflow:hidden;border-top:0.025rem solid #DCDCDC;">
      <div class="btn1" onclick='closeDiv();'>取消</div>
      <div class="btn2" onclick='sureRemark();'>确定</div>
    </div>
  </div>
</div>
<!--支付密码-->
<div class="all_div2" style="display:none;width: 100%;height: 100%;background-color: gray;position: absolute;z-index: 9999;background: rgba(0,0,0,0.5);top: 0;left: 0;padding: 0;margin: 0;text-align: center;">
</div>
<script type="text/javascript" src="__JS__/jquery.min.js"></script>
<script type="text/javascript">
    var ruleList = {$shopMsgJson};
    var payPass = $('#payPass').val();
    var typetypeee = {$shopType};
    var ratio = {$shopRatio};
    var conf_rate = {$conf_rate};
    var jifen = 0;
    var remarkType = '';
    //----------------------------
    var payMoney = 0;
    var payJifen = 0;
    var myJifen = 0;
    //----------------------------
    $('#getJiFen').bind('input propertychange', function() {
        var money = $(this).val();
        if (money && parseFloat(money) > 0) {
            for (var i = 0; i < ruleList.length; i++) {
                if (parseFloat(money) >= parseFloat(ruleList[i].rule_cash)) {
                    jifen = ruleList[i].rule_jifen;
                }
            }

            if(typetypeee=='2'){
                jifen=parseInt((money*ratio)/conf_rate);
            }
            if (jifen > 0) {
                $('#sendJifen').text("（赠送" + jifen + "积分）");
            } else {
                $('#sendJifen').text('');
            }
        } else {
            jifen = 0;
           $('#sendJifen').text('');
        }

    });

    // 换算
    function hs() {
        var jifen_money = $('#jifenMoney').val();
        var jifen_jifen = Math.ceil(parseFloat(jifen_money) / 0.14)
        $('#jifenMoney').val(parseFloat(jifen_money));
        $('#jifenJifen').val(jifen_jifen);
    }
    //备注
    function addnote(type) {
        remarkType = type;
        if(remarkType == 'money'){
            var text = $('.moneyRemark').text().trim(' ');
        }else{
            var text = $('.jifenRemark').text().trim(' ');
        }
        $('#note').val(text);
        $('.all_div').css('display','block');
        $('.moneyDiv').removeClass('hidden');
        $('html,body').addClass('ovfHiden');
    }
    function closeDiv() {
        $('.all_div').css('display','none');
        $('.moneyDiv').addClass('hidden');
        $('html,body').removeClass('ovfHiden');
    }
    function sureRemark() {
        var text = $('#note').val().trim(' ');
        if(remarkType == 'money'){
            $('.moneyRemark').text(text);
            if(text == ''){
                $('.moneyEdit').addClass('hidden');
                $('.moneyAdd').removeClass('hidden');
            }else{
                $('.moneyEdit').removeClass('hidden');
                $('.moneyAdd').addClass('hidden');
            }
        }else{
            $('.jifenRemark').text(text);
            if(text == ''){
                $('.jifenEdit').addClass('hidden');
                $('.jifenAdd').removeClass('hidden');
            }else{
                $('.jifenEdit').removeClass('hidden');
                $('.jifenAdd').addClass('hidden');
            }
        }
        $('.all_div').css('display','none');
        $('.moneyDiv').addClass('hidden');
        $('html,body').removeClass('ovfHiden');
    }
//支付 1 现金   2积分
//NaN undefined '' 0
  function payMoneyJifen(payType) {
      if(payType == 1){
          payMoney = $('#getJiFen').val();
          //jifen(赠送的积分，不需要了，接口不需要传参。。。)
          var remark = $('.moneyRemark').text().trim(' ');
          $.ajax({
              url: "{:url('admin/Share/QRcodePayH5')}",
              type: 'post',
              data: {
                  type: 1,
                  payment_type: 2,
                  integral: 0,
                  money: payMoney,
                  remark: remark
              },
              dataType: 'HTML',
              success: function (returndata) {
                  if(returndata == 1){
                      alert('收款码错误');
                  }else if(returndata == 2){
                      alert('商家积分不足');
                  }else if(returndata == 3){
                      alert('订单生成失败');
                  }else if(returndata == 4){
                      alert('金额错误！');
                  }else{
                      $('.all_div2').css('display','block');
                      $('.all_div2').html(returndata);
                  }
              }
          })
      }else{
          payJifen = $('#jifenJifen').val();
          myJifen = $('#user_integral').val();
          if(!payJifen || parseInt(payJifen) <= 0){
              alert('请填写积分！');
              return false;
          }
          if(parseInt(payJifen) > parseInt(myJifen)){
              alert('积分不足！');
              return false;
          }else{
              if(payPass){
                  $.ajax({
                      url:"{:url('admin/Share/inputpass')}",
                      type:'post',
                      data:'',
                      dataType:'html',
                      success:function(res){
                          $('.all_div2').css('display','block');
                          $('.all_div2').html(res);
                          $("#box input").eq(0).focus();
                          $('html,body').addClass('ovfHiden');
                      }
                  })
              }else{
                  location.href = "{:url('admin/Share/setpass')}";
              }
          }
      }
  }
</script>
</html>
